<template>
    <div>
        {{ title }} - 认为大象的鼻子很长
        <!-- 
            在此通过这个按钮的点击事件，
            响应父组件的事件($emit('事件名',传递的值))
         -->
        <button @click="$emit('change','小虎')">
            改变
        </button>
    </div>
</template>
<script>
export default {
    /* 
        vue提倡单向数据流，
        父组件向 子组件传值(改变值的过程)，
        如果说在子组件中改变 父组件传递的props，
        会导致，父组件传递的值，和子组件接受的值，
        数据不一致的情况,
        解决方案：
            通过自定义事件($emit())
        props 里面的属性值，会根据父组件传递的值
        而改变，父组件的值发生改变，子组件也会跟着改
    */
    props: ['title'],
    methods: {
        test(){
            console.log(this.title);
        }
    }
}
</script>